<template>
  <view class="feedback-detail-container">
    <!-- 顶部导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left" @click="navigateBack">
        <FeatherIcon name="chevron-left" size="24" color="#333"></FeatherIcon>
      </view>
      <text class="navbar-title">反馈详情</text>
      <view class="navbar-right"></view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="isLoading">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 详情内容 -->
    <view class="feedback-content" v-else>
      <!-- 反馈标题卡片 -->
      <view class="feedback-card">
        <view class="feedback-header">
          <text class="feedback-title">{{ feedbackDetail.title }}</text>
          <view :class="['status-tag', getStatusClass(feedbackDetail.status)]">
            {{ getStatusText(feedbackDetail.status) }}
          </view>
        </view>
        <text class="feedback-desc">{{ feedbackDetail.content }}</text>

        <!-- 截图区域 -->
        <view
          class="screenshots"
          v-if="
            feedbackDetail.screenshots && feedbackDetail.screenshots.length > 0
          "
        >
          <view
            class="screenshot-item"
            v-for="(img, index) in feedbackDetail.screenshots"
            :key="index"
            @click="previewImage(img, index)"
          >
            <image
              class="screenshot-image"
              :src="img"
              mode="aspectFill"
            ></image>
          </view>
        </view>

        <!-- 设备信息 -->
        <view
          class="device-info"
          v-if="feedbackDetail.device || feedbackDetail.appVersion"
        >
          <view class="info-item" v-if="feedbackDetail.device">
            <text class="info-label">设备信息:</text>
            <text class="info-value">{{ feedbackDetail.device }}</text>
          </view>
          <view class="info-item" v-if="feedbackDetail.appVersion">
            <text class="info-label">应用版本:</text>
            <text class="info-value">{{ feedbackDetail.appVersion }}</text>
          </view>
        </view>

        <view class="feedback-footer">
          <text class="feedback-time">{{
            formatTime(feedbackDetail.createdAt)
          }}</text>
        </view>
      </view>

      <!-- 回复列表 -->
      <view
        class="replies-section"
        v-if="feedbackDetail.replies && feedbackDetail.replies.length > 0"
      >
        <text class="replies-title"
          >回复记录 ({{ feedbackDetail.replies.length }})</text
        >
        <view class="reply-list">
          <view
            class="reply-item"
            v-for="(reply, index) in feedbackDetail.replies"
            :key="index"
          >
            <view class="reply-header">
              <view class="reply-user" :class="{ 'admin-user': reply.isAdmin }">
                <FeatherIcon
                  :name="reply.isAdmin ? 'shield' : 'user'"
                  size="18"
                  :color="reply.isAdmin ? '#ff9800' : '#666'"
                ></FeatherIcon>
                <text class="user-type">{{
                  reply.isAdmin ? "开发者回复" : "用户"
                }}</text>
              </view>
              <text class="reply-time">{{ formatTime(reply.createdAt) }}</text>
            </view>
            <text class="reply-content">{{ reply.content }}</text>
          </view>
        </view>
      </view>

      <!-- 无回复状态 -->
      <view class="no-replies" v-else>
        <FeatherIcon name="message-circle" size="48" color="#ddd"></FeatherIcon>
        <text class="no-replies-text">暂无回复，请耐心等待</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import FeatherIcon from "@/components/FeatherIcon.vue";
import { showLoading, hideLoading, showError } from "@/utils/common";
import { getFeedbackDetail } from "@/api";
import { isLoggedIn } from "@/api";

// 页面参数
const feedbackId = ref("");
// 反馈详情数据
const feedbackDetail = ref({});
// 加载状态
const isLoading = ref(true);

// 返回上一页
const navigateBack = () => {
  uni.navigateBack();
};

// 获取反馈详情
const fetchFeedbackDetail = async () => {
  if (!feedbackId.value) {
    showError("反馈ID不能为空");
    setTimeout(() => {
      navigateBack();
    }, 1500);
    return;
  }

  isLoading.value = true;
  try {
    const res = await getFeedbackDetail(feedbackId.value);

    if (res) {
      feedbackDetail.value = res;
    } else {
      showError("获取反馈详情失败");
      setTimeout(() => {
        navigateBack();
      }, 1500);
    }
  } catch (error) {
    console.error("获取反馈详情失败:", error);
    showError("获取反馈详情失败，请稍后重试");
    setTimeout(() => {
      navigateBack();
    }, 1500);
  } finally {
    isLoading.value = false;
  }
};

// 获取页面参数
const getPageParams = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.$page?.options || currentPage.options || {};

  feedbackId.value = options.id || "";
  console.log("获取到反馈ID:", feedbackId.value);
};

// 获取状态文字
const getStatusText = (status) => {
  const statusMap = {
    pending: "待处理",
    processing: "处理中",
    resolved: "已解决",
    closed: "已关闭",
  };
  return statusMap[status] || "待处理";
};

// 获取状态样式类
const getStatusClass = (status) => {
  const classMap = {
    pending: "status-pending",
    processing: "status-processing",
    resolved: "status-resolved",
    closed: "status-closed",
  };
  return classMap[status] || "status-pending";
};

// 预览图片
const previewImage = (current, index) => {
  uni.previewImage({
    urls: feedbackDetail.value.screenshots,
    current: current,
  });
};

// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return "";

  const date = new Date(timeStr);
  const now = new Date();
  const diff = now - date;

  // 一小时内
  if (diff < 3600000) {
    const minutes = Math.floor(diff / 60000);
    return `${minutes ? minutes : "几"}分钟前`;
  }

  // 一天内
  if (diff < 86400000) {
    const hours = Math.floor(diff / 3600000);
    return `${hours}小时前`;
  }

  // 一周内
  if (diff < 604800000) {
    const days = Math.floor(diff / 86400000);
    return `${days}天前`;
  }

  // 其他
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hour = String(date.getHours()).padStart(2, "0");
  const minute = String(date.getMinutes()).padStart(2, "0");
  return `${year}-${month}-${day} ${hour}:${minute}`;
};

onMounted(() => {
  getPageParams();
  if (isLoggedIn()) {
    fetchFeedbackDetail();
  } else {
    uni.navigateTo({
      url: "/pages/login/login",
    });
  }
});
</script>

<style lang="scss">
.feedback-detail-container {
  background-color: #f8f9fa;
  min-height: 100vh;
}

.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 80rpx;
  padding-bottom: 20rpx;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  z-index: 999;
  display: flex;
  align-items: center;

  .navbar-left {
    width: 90rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .navbar-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }

  .navbar-right {
    width: 90rpx;
  }
}

.loading-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;

  .loading-spinner {
    width: 50rpx;
    height: 50rpx;
    border: 4rpx solid #f3f3f3;
    border-top: 4rpx solid #ff9800;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20rpx;
  }

  .loading-text {
    font-size: 28rpx;
    color: #999;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.feedback-content {
  padding: calc(var(--status-bar-height, 25px) + 44px + 20rpx) 30rpx 40rpx;
}

.feedback-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

  .feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;

    .feedback-title {
      font-size: 34rpx;
      font-weight: 600;
      color: #333;
      flex: 1;
    }

    .status-tag {
      font-size: 22rpx;
      padding: 6rpx 16rpx;
      border-radius: 20rpx;

      &.status-pending {
        background-color: rgba(255, 152, 0, 0.1);
        color: #ff9800;
      }

      &.status-processing {
        background-color: rgba(33, 150, 243, 0.1);
        color: #2196f3;
      }

      &.status-resolved {
        background-color: rgba(76, 175, 80, 0.1);
        color: #4caf50;
      }

      &.status-closed {
        background-color: rgba(158, 158, 158, 0.1);
        color: #9e9e9e;
      }
    }
  }

  .feedback-desc {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30rpx;
    display: block;
  }

  .screenshots {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10rpx 20rpx;

    .screenshot-item {
      width: 33.333%;
      padding: 10rpx;
      box-sizing: border-box;

      .screenshot-image {
        width: 100%;
        height: 180rpx;
        border-radius: 8rpx;
        background-color: #f0f0f0;
      }
    }
  }

  .device-info {
    margin-bottom: 20rpx;
    padding: 16rpx 20rpx;
    background-color: #f8f9fa;
    border-radius: 8rpx;

    .info-item {
      display: flex;
      font-size: 24rpx;
      margin-bottom: 8rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .info-label {
        color: #999;
        min-width: 140rpx;
      }

      .info-value {
        color: #666;
        flex: 1;
      }
    }
  }

  .feedback-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .feedback-time {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.replies-section {
  margin-bottom: 40rpx;

  .replies-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
  }

  .reply-list {
    .reply-item {
      background-color: #fff;
      border-radius: 16rpx;
      padding: 24rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

      &:last-child {
        margin-bottom: 0;
      }

      .reply-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;

        .reply-user {
          display: flex;
          align-items: center;

          &.admin-user {
            .user-type {
              color: #ff9800;
            }
          }

          .user-type {
            font-size: 26rpx;
            color: #666;
            margin-left: 8rpx;
          }
        }

        .reply-time {
          font-size: 24rpx;
          color: #999;
        }
      }

      .reply-content {
        font-size: 28rpx;
        color: #333;
        line-height: 1.6;
      }
    }
  }
}

.no-replies {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx 0;
  text-align: center;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .no-replies-text {
    font-size: 28rpx;
    color: #999;
    margin-top: 16rpx;
  }
}
</style>
